<template>
  <el-menu
    :default-active="$route.path"
    class="el-menu-demo"
    mode="horizontal"
    background-color="#545c64"
    text-color="#fff"
    active-text-color="#ffd04b"
    router
  >
    <el-menu-item index="/public">公共</el-menu-item>
     <el-menu-item index="/drill">训练</el-menu-item>
    <el-menu-item index="/training" >培训</el-menu-item>
    <el-menu-item index="/exam">考试</el-menu-item>

    <div class="demo">
      <el-dropdown >
        <el-button type="primary">
        个人中心<el-icon class="el-icon--right"><arrow-down /></el-icon>
      </el-button>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item @click="toself">个人信息</el-dropdown-item>
          <el-dropdown-item @click="dialogVisiblePsw = true">修改密码</el-dropdown-item>         
          <el-dropdown-item @click="dialogVisible = true">实名认证</el-dropdown-item>
          <el-dropdown-item @click="out">退出登录</el-dropdown-item>
        </el-dropdown-menu>
      </template>
      </el-dropdown>
  </div>
  </el-menu>
  <el-dialog
      v-model="dialogVisiblePsw"
      title="修改密码"
      width="500"
      :closeOnClickModal="false"
  >
    <span>请输入新密码:</span> <el-input type="password" v-model="newPsw0"/>
    <span>请再次输入新密码:</span> <el-input type="password" v-model="newPsw1"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisiblePsw = false,newPsw0='',newPsw1=''">取消</el-button>
        <el-button type="primary" @click="judgePsw">
          确认
        </el-button>
      </div>
    </template>
  </el-dialog>

  
  <el-dialog
      v-model="dialogVisible"
      title="实名认证"
      width="500"
      :closeOnClickModal="false"
  >
    <span>请输入真实姓名:</span> <el-input v-model="realName"/>
    <span>请输入身份证号:</span> <el-input v-model="idCard"/>
    <template #footer>
      <div class="dialog-footer">
        <el-button @click="dialogVisible = false,realName='',idCard=''">取消</el-button>
        <el-button type="primary" @click="identity">
          提交
        </el-button>
      </div>
    </template>
  </el-dialog>
  
</template>


<script>
import { useRouter} from 'vue-router'
import {useStore} from 'vuex'
import {reactive, ref} from "vue";
import API from '@/api/identity'
import { ElMessage } from 'element-plus';
import {JSEncrypt} from "jsencrypt";
export default {

  setup(){
      const router = useRouter()
      const store = useStore()
    let dialogVisible=ref(false)
    let dialogVisiblePsw=ref(false)
    let username=ref('')
    let newPsw0=ref('')
    let newPsw1=ref('')
    let realName=ref('')
    let idCard=ref('')
      function login(){
        router.push('/login')
      }
      function out(){
        window.localStorage.clear()
        store.commit('user/loginOut')
        // 状态保持清除后刷新页面
        router.push('/login')
        setTimeout(function (){window.location.reload(true)},10)
      }
     function toself(){
       router.push('/self')
     }
     let param=reactive({
    
     })
     let paramnew=reactive({
        type:'1',
        loginStatus:'1',
    })
      function validateIdCard() {
        const id = idCard.value;
        if (id.length !== 18) {
          ElMessage.error('身份证号码应为18位！')
          return;
        }
        const weights = [
        7, 9, 10, 5, 8, 4, 2, 1, 6, 3, 7, 9, 10, 5, 8, 4, 2,
        ];
        const checkCodes = '10X98765432';
        let sum = 0;
        for (let i = 0; i < 17; i++) {
          const digit = parseInt(id.charAt(i), 10);
          sum += digit * weights[i];
        }
        const checkIndex = sum % 11;
        const checkCode = checkCodes.charAt(checkIndex);
        if (checkCode !== id.charAt(17).toUpperCase()) {
          ElMessage.error('身份证校验码无效！')
          return;
        }
        // 验证日期部分
        const year = parseInt(id.substring(6, 10), 10);
        const month = parseInt(id.substring(10, 12), 10);
        const day = parseInt(id.substring(12, 14), 10);
        const date = new Date(year, month - 1, day);
        if (
          date.getFullYear() !== year ||
          date.getMonth() + 1 !== month ||
          date.getDate() !== day
        ) {
          ElMessage.error('身份证校验码无效！')
          return;
        }
        let token = localStorage.getItem("token")
        API.identity(param,token).then(res=>{
          console.log(res)
          if(res.data===true){
            console.log(222)
            realName.value='',
            idCard.value='',
            dialogVisible.value=false
            alert('实名认证成功,请重新登录')
            router.push('/login')
          }
        }).catch(error=>{
          console.log(error)
        })
        
    }

     function identity(){
        if(idCard.value.endsWith('x')){
          idCard.value=idCard.value.replace('x','X')
        }
         param={
           realName:realName.value,
           idCard:idCard.value
         }
        validateIdCard()
        
     }

     function judgePsw(){
        if(newPsw0.value!==newPsw1.value){
          ElMessage.error('两次密码输入不一致！')
        }else{
          paramnew.username=localStorage.getItem('loginusername')
          paramnew.password=newPsw0.value
          API.getPublic().then((res) =>{
            if (res.data.code === '0') {
              const entry = new JSEncrypt()
              entry.setPublicKey(res.data.content.publicKeyStr)
              paramnew.username =  entry.encrypt(paramnew.username)
              paramnew.password =entry.encrypt(paramnew.password)
              paramnew.random=res.data.content.random
            }
            let token = localStorage.getItem('token')
            API.changePassword(paramnew,token).then(res=>{
            if(res.data.code==='0'){
              username.value='',
              newPsw0.value='',
              newPsw1.value='',
              dialogVisiblePsw.value=false
              ElMessage.success('密码修改成功！')
              router.push('/login')
              store.commit('user/loginOut')
            }
            }).catch(error=>{
              ElMessage.error('用户名错误！')
            })
          }).catch(error=>{
          console.log(error)
          })
          
        }
     }
     return{
      login,
      out,
      toself,
      dialogVisible,
      realName,
      idCard,
      identity,
      param,
      dialogVisiblePsw,
      newPsw0,
      newPsw1,
      judgePsw,
      username,
      paramnew
    }
  }
}
</script>

<style scoped>
 .el-menu-demo{
   padding-left: 300px!important;
}
 .el-menu-item{
    font-size: 20px!important;
 }
  .demo{
  display: flex;
  align-items: center;
  margin-left: auto;
  padding-right: 30px;
 }

</style>
